<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    padding: 0;
    margin: 0;
}
#container{
    width: 100%;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
}
#box{
    width: 200px;
    height:200px;
    transform-style:preserve-3d ;
    transform: translateZ(-100px);
    transition: transform 1s;
    animation: spin 13s linear infinite;
}
#box div{
    width: 200px;
    height:200px;
    position: absolute;
}
img{
    width: 200px;
    height: 200px;
    opacity: 0.9;
}
/*立方体的六个面*/
.front{
    background-color: rgba(0,255,255,0.2);
    transform: translateZ(100px);           /*往外移动100像素*/
}
.back{
    background-color: rgba(0,255,0,0.3);
    transform: translateZ(-100px) rotateY(180deg);           /*往里移动100像素，绕Y轴旋转180度*/
}
.left{
    background-color: rgba(0,0,255,0.3);
    transform: translateX(-100px) rotateY(-90deg);      /*往左移动100像素，绕Y轴旋转90度*/
}
.right{
    background-color: rgba(255,255,0,.3);
    transform: translateX(100px) rotateY(90deg);      /*往右移动100像素，绕Y轴旋转90度*/
}
.top{
    background-color: rgba(255,0,255,.3);
    transform: translateY(-100px) rotateX(90deg);      /*向上移动100像素，绕X轴旋转90度*/
}
.bottom{
    background-color: rgba(255,0,0,0.3);
    transform: translateY(100px) rotateX(-90deg);        /*向下移动100像素，绕X轴旋转90度*/
}
/*动画*/
@keyframes spin
{
    0% {
        transform: rotateX(0deg);
    }
    20%{
        transform: translateZ(-100px) rotateX(-90deg) rotateY(-90deg);
    }
    40% {
        transform: rotateX(180deg);
    }
    60% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    80% {
        transform: rotateX(360deg) rotateY(180deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
    </style>
</head>
<body>
    <div id="container">
        <div id="box">
            <div class="front"><img src="imgs/1.jpg"/></div>        <!--图片地址改为对应的本地地址-->
            <div class="back"><img src="imgs/2.jpg"/></div>
            <div class="left"><img src="imgs/3.jpg"/></div>
            <div class="right"><img src="imgs/4.jpg"/></div>
            <div class="top"><img src="imgs/5.jpg"/></div>
            <div class="bottom"><img src="imgs/6.png"/></div>
        </div>
</div>
</body>
</html>